<template>
<div>
  <div class="headTitle">点状态势分析系统</div>
  <Layout style="height: 100%" class="main">
    <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
      <side-menu accordion ref="sideMenu" :active-name="$route.path" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
        <!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
<!--        <div class="logo-con">-->
<!--          <div class="leader">领导驾驶舱</div>-->
          <!-- <img  :src="maxLogo" key="max-logo" /> -->
<!--          <img v-show="collapsed" :src="minLogo" key="min-logo" />-->
<!--        </div>-->
      </side-menu>
    </Sider>
    <Layout>
      <Header class="header-con">
        <header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
          <user :user-avatar="userAvatar"/>
        </header-bar>
      </Header>
      <Content class="main-content-con">
        <Layout class="main-layout-con">
          <!-- <div class="tag-nav-wrapper">
            <tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag"/>
          </div> -->
          <Content class="content-wrapper">
            <keep-alive :include="cacheList">
              <router-view/>
            </keep-alive>
            <ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
          </Content>
        </Layout>
      </Content>
    </Layout>
  </Layout>
  </div>
</template>
<script>
import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import ABackTop from './components/a-back-top'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import './main.less'
import monitoring from '@/view/alarm/management/components/main'
import { getWarning } from '@/api/alarm'
export default {
  name: 'Main',
  components: {
    SideMenu,
    HeaderBar,
    TagsNav,
    User,
    ABackTop
  },
  data () {
    return {
      collapsed: false,
      minLogo,
      maxLogo,
      isFullscreen: false,
      timer: null
    }
  },
  computed: {
    ...mapGetters([
      'errorCount'
    ]),
    tagNavList () {
      return this.$store.state.app.tagNavList
    },
    tagRouter () {
      return this.$store.state.app.tagRouter
    },
    userAvatar () {
      return ''
      // return this.$store.state.user.avatarImgPath
    },
    cacheList () {
      const list = ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []]
      return list
    },
    menuList () {
      // return this.$store.getters.menuList
      // return this.changeMenuList(routers, JSON.parse(localStorage.getItem('userInfo')).functions)
      return JSON.parse(localStorage.getItem('menuList'))
    },
    local () {
      return this.$store.state.app.local
    },
    hasReadErrorPage () {
      return this.$store.state.app.hasReadErrorPage
    },
    unreadCount () {
      return this.$store.state.user.unreadCount
    }
  },
  methods: {
    ...mapMutations([
      'setBreadCrumb',
      'setTagNavList',
      'addTag',
      'setLocal',
      'setHomeRoute',
      'closeTag'
    ]),
    ...mapActions([
      'handleLogin',
      'getUnreadMessageCount'
    ]),
    turnToPage (route) {
      this.$router.push(route)
      // let { name, params, query } = {}
      // if (typeof route === 'string') name = route
      // else {
      //   name = route.name
      //   params = route.params
      //   query = route.query
      // }
      // if (name.indexOf('isTurnByHref_') > -1) {
      //   window.open(name.split('_')[1])
      //   return
      // }
      // this.$router.push({
      //   name,
      //   params,
      //   query
      // })
    },
    handleCollapsedChange (state) {
      this.collapsed = state
    },
    handleCloseTag (res, type, route) {
      if (type !== 'others') {
        if (type === 'all') {
          this.turnToPage(this.$config.homeName)
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route)
          }
        }
      }
      this.setTagNavList(res)
    },
    handleClick (item) {
      this.turnToPage(item)
    },
    changeMenuList (allData, qxData) {
      let newList = []
      for (let i = 0; i < allData.length; i++) {
        let fitem = allData[i].children
        if (fitem && fitem.length > 0) {
          let obj
          obj = {
            path: allData[i].path,
            name: allData[i].name,
            meta: allData[i].meta,
            component: allData[i].component,
            children: []
          }
          for (let j = 0; j < fitem.length; j++) {
            for (let son = 0; son < qxData.length; son++) {
              if (fitem[j].name === qxData[son].functionName) {
                obj.children.push({ ...fitem[j] })
              }
            }
          }
          if (obj && obj.children && obj.children.length > 0) {
            newList.push(obj)
          }
        }
      }
      console.log(newList)
      return newList
    }
  },
  watch: {
    '$route' (newRoute) {
      const { name, query, params, meta } = newRoute
      this.addTag({
        route: { name, query, params, meta },
        type: 'push'
      })
      this.setBreadCrumb(newRoute)
      this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
      this.$refs.sideMenu.updateOpenName(newRoute.name)
    }
  },
  mounted () {
    /**
     * @description 初始化设置面包屑导航和标签导航
     */
    this.setTagNavList()
    this.setHomeRoute(routers)
    const { name, params, query, meta } = this.$route
    this.addTag({
      route: { name, params, query, meta }
    })
    this.setBreadCrumb(this.$route)
    // 设置初始语言
    this.setLocal(this.$i18n.locale)
    // 如果当前打开页面不在标签栏中，跳到homeName页
    if (!this.tagNavList.find(item => item.name === this.$route.name)) {
      this.$router.push({
        name: this.$config.homeName
      })
    }
    // 获取未读消息条数
    this.getUnreadMessageCount()

    this.timer = setInterval(() => {
      getWarning(600).then(response => {
        response.data.forEach(item => {
          let titles = {
            locationName: item.video.location.locationName,
            videoName: item.video.videoName,
            algorithmName: item.algorithm.algorithmName,
            createTime: item.alarmDateTime
          }
          let data = {
            alarmImagePath: item.alarmImagePath,
            alarmVideoPath: item.alarmVideoPath,
            level: item.algorithm.alarmLevel.level,
            alarmID: item.id,
            status: 3
          }
          monitoring.add({ titles, data, id: item.id, time: item.alarmDateTime })
        })
      })
    }, 10000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>
